<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">考试管理系统</div>
      <div class="ms-title">{{titleRole}}登录</div>
      <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
        <el-form-item prop="username">
          <el-input v-model="param.username" placeholder="学号/学工号">
            <template #prepend>
              <el-button icon="el-icon-user"></el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="密码" v-model="param.password"
                    @keyup.enter="submitForm()">
            <template #prepend>
              <el-button icon="el-icon-lock"></el-button>
            </template>
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm()">登录</el-button>
        </div>
        <div class="login-btn">
          <el-button type="primary" @click="switchRole()">切换登录角色</el-button>
        </div>
<!--        <p class="login-tips">Tips : 用户名和密码随便填。</p>-->
      </el-form>
    </div>
  </div>
</template>

<script>
import {ref, reactive} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import {login} from "../api/index";
import {ElMessage} from "element-plus";

export default {
  // setup() {
  //   const router = useRouter();
  //   const param = reactive({
  //     username: "admin",
  //     password: "123123",
  //   });
  //
  //   const rules = {
  //     username: [
  //       {
  //         required: true,
  //         message: "请输入用户名",
  //         trigger: "blur",
  //       },
  //     ],
  //     password: [
  //       {required: true, message: "请输入密码", trigger: "blur"},
  //     ],
  //   };
  //   const login = ref(null);
  //   const submitForm = () => {
  //     login.value.validate((valid) => {
  //       if (valid) {
  //         ElMessage.success("登录成功");
  //         localStorage.setItem("ms_username", param.username);
  //         router.push("/");
  //       } else {
  //         ElMessage.error("登录成功");
  //         return false;
  //       }
  //     });
  //   };
  //
  //   const store = useStore();
  //   store.commit("clearTags");
  //
  //   return {
  //     param,
  //     rules,
  //     login,
  //     submitForm,
  //   };
  // },
  data(){
    return{
      param:{
        loginType:'student',
      },
      titleRole:'学生',
      userName:'',
      password:'',
      rules:{
        userName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur",},
        ],
      },
    }
  },
  methods:{
    submitForm(){
      // var _this = this;
      login({userCode:this.param.username,pwd: this.param.password,loginType:this.param.loginType}).then(res => {
        // Vue.http.headers.common['Authorization'] = res.data;
        this.$router.push('dashboard');
        console.log(this.$router);
        if(res.code === "200"){
          ElMessage.success("登录成功");
          // _this.userToken = res.data;
          window.localStorage.setItem("Authorization",res.data);
          console.log(res.data);
          // this.$router.push({path:"/dashboard"});
          this.$router.push('dashboard');
        }
      })
    },
    switchRole(){
      if(this.param.loginType === 'student'){
        this.param.loginType = 'teacher';
        this.titleRole = '教师';
      }else if(this.param.loginType === 'teacher'){
        this.param.loginType = 'admin';
        this.titleRole = '管理员';
      }else if(this.param.loginType === 'admin'){
        this.param.loginType = 'student';
        this.titleRole = '学生';
      }
    },
    registerHandle(){
      this.$router.push('register');
    }
  },
};
</script>

<style scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  /*background-image: url(../assets/img/login-bg.jpg);*/
  background-size: 100%;
  color: blanchedalmond;
}

.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}

.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.ms-content {
  padding: 30px 30px;
}

.login-btn {
  text-align: center;
}

.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}

.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
</style>